<template>
  <view class="user-container">
    <view class="user-header">
      <view class="avatar">
        <image src="/static/logo.png" mode="aspectFill"></image>
      </view>
      <view class="user-info">
        <text class="nickname">游客用户</text>
        <text class="user-id">ID: {{ userId }}</text>
      </view>
    </view>

    <view class="menu-list">
      <view class="menu-item" @tap="goToGameRecord">
        <text class="menu-icon">📊</text>
        <text class="menu-text">游戏记录</text>
        <text class="menu-arrow">›</text>
      </view>
      
      <view class="menu-item" @tap="goToSettings">
        <text class="menu-icon">⚙️</text>
        <text class="menu-text">设置</text>
        <text class="menu-arrow">›</text>
      </view>
      
      <view class="menu-item" @tap="goToAbout">
        <text class="menu-icon">ℹ️</text>
        <text class="menu-text">关于</text>
        <text class="menu-arrow">›</text>
      </view>
    </view>

    <view class="stats-container">
      <view class="stat-item">
        <text class="stat-value">{{ gamesPlayed }}</text>
        <text class="stat-label">已玩局数</text>
      </view>
      <view class="stat-item">
        <text class="stat-value">{{ winRate }}%</text>
        <text class="stat-label">胜率</text>
      </view>
      <view class="stat-item">
        <text class="stat-value">{{ totalScore }}</text>
        <text class="stat-label">总积分</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userId: '1001',
      gamesPlayed: 0,
      winRate: 0,
      totalScore: 0
    }
  },
  onLoad() {
    this.loadUserStats()
  },
  methods: {
    loadUserStats() {
      // TODO: 从后端加载用户统计数据
      // 暂时使用模拟数据
      this.gamesPlayed = 0
      this.winRate = 0
      this.totalScore = 0
    },
    goToGameRecord() {
      uni.showToast({
        title: '游戏记录功能开发中',
        icon: 'none'
      })
    },
    goToSettings() {
      uni.showToast({
        title: '设置功能开发中',
        icon: 'none'
      })
    },
    goToAbout() {
      uni.showToast({
        title: '关于功能开发中',
        icon: 'none'
      })
    }
  }
}
</script>

<style scoped>
.user-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.user-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 60rpx 40rpx 40rpx;
  display: flex;
  align-items: center;
}

.avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 60rpx;
  overflow: hidden;
  background-color: #fff;
  border: 4rpx solid rgba(255, 255, 255, 0.3);
}

.avatar image {
  width: 100%;
  height: 100%;
}

.user-info {
  margin-left: 30rpx;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.nickname {
  font-size: 36rpx;
  color: #fff;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.user-id {
  font-size: 26rpx;
  color: rgba(255, 255, 255, 0.8);
}

.menu-list {
  background-color: #fff;
  margin: 20rpx;
  border-radius: 16rpx;
  overflow: hidden;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 30rpx 40rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.menu-item:last-child {
  border-bottom: none;
}

.menu-item:active {
  background-color: #f8f8f8;
}

.menu-icon {
  font-size: 40rpx;
  margin-right: 20rpx;
}

.menu-text {
  flex: 1;
  font-size: 30rpx;
  color: #333;
}

.menu-arrow {
  font-size: 40rpx;
  color: #ccc;
}

.stats-container {
  background-color: #fff;
  margin: 20rpx;
  border-radius: 16rpx;
  padding: 40rpx 20rpx;
  display: flex;
  justify-content: space-around;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-value {
  font-size: 40rpx;
  color: #667eea;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.stat-label {
  font-size: 24rpx;
  color: #999;
}
</style>
